<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<title>商品分类</title>
</head>
<body>
	<!-- header.jsp -->
	<jsp:include page="../header.jsp"></jsp:include>
	<!-- /header.jsp -->

	<!-- SECTION -->
	<div class="section">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">

				<!-- Category -->
				<div id="store" class="col-md-12">

					<!-- products -->
					<div class="row">
						<c:forEach items="${productPage.data}" var="p">
							<!-- product -->
							<div class="col-md-4 col-xs-6">
								<div class="product">
									<div class="product-img">
										<img src="${pageContext.request.contextPath}/${p.pimage}" alt="${p.pname}">
									</div>
									<div class="product-body">
										<p class="product-category">
											<c:forEach items="${categorys}" var="c">
												<c:if test="${p.cid == c.cid}">${c.cname}</c:if>
											</c:forEach>
										</p>
										<h3 class="product-name">
											<a href="${pageContext.request.contextPath}/product?method=productDetails&pid=${p.pid}">${p.pname}</a>
										</h3>
										<h4 class="product-price">￥${p.shop_price} <del class="product-old-price">￥${p.market_price}</del></h4>
										<div class="product-rating">
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
										</div>
										<div class="product-btns">
											<button class="quick-view" onclick="productDeatils('${p.pid}')"><i class="fa fa-eye"></i><span class="tooltipp">商品详情查看</span></button>
										</div>
									</div>
									<div class="add-to-cart">
										<button class="add-to-cart-btn" onclick="addProductToCart('${p.pid}')"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
									</div>
								</div>
							</div>
							<!-- /product -->
						</c:forEach>
					</div>
					<!-- /products -->

					<!-- store bottom filter -->
					<div class="store-filter clearfix">
						<span class="store-qty">展示${fn:length(productPage.data)}个商品</span>
						<ul class="store-pagination">
							<c:if test="${productPage.pageNumber == 1}">
								<li class="disabled">
									<a href="javascript:void(0);">
										<i class="fa fa-angle-left"></i>
									</a>
								</li>
							</c:if>
							<c:if test="${productPage.pageNumber != 1}">
								<li>
									<a href="${pageContext.request.contextPath}/product?method=productCategory&pageNumber=${productPage.pageNumber - 1}&cid=${param.cid}">
										<i class="fa fa-angle-left"></i>
									</a>
								</li>
							</c:if>
							<c:forEach begin="1" end="${productPage.totalPage}" var="n">
								<c:if test="${productPage.pageNumber == n}">
									<a href="${pageContext.request.contextPath}/product?method=productCategory&pageNumber=${n}&cid=${param.cid}">
										<li class="active">${n}</li>
									</a>
								</c:if>
								<c:if test="${productPage.pageNumber != n}">
									<a href="${pageContext.request.contextPath}/product?method=productCategory&pageNumber=${n}&cid=${param.cid}">
										<li>${n}</li>
									</a>
								</c:if>
							</c:forEach>

							<c:if test="${productPage.pageNumber == productPage.totalPage}">
								<li class="disabled">
									<a href="javascript:void(0);">
										<i class="fa fa-angle-right"></i>
									</a>
								</li>
							</c:if>
							<c:if test="${productPage.pageNumber != productPage.totalPage}">
								<li>
									<a href="${pageContext.request.contextPath}/product?method=productCategory&pageNumber=${productPage.pageNumber + 1}&cid=${param.cid}">
										<i class="fa fa-angle-right"></i>
									</a>
								</li>
							</c:if>
						</ul>
					</div>
					<!-- /store bottom filter -->
				</div>
				<!-- /Category -->
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /SECTION -->

	<!-- footer.jsp -->
	<jsp:include page="../footer.jsp"></jsp:include>
	<!-- /footer.jsp -->

</body>

</html>
